<template>
           <div class="left-box" ref="Blog">
                <p class="left-box-title shadow"><i class="fa fa-diamond fa-fw" aria-hidden="true"></i>{{data.title}}</p>

                <div class="article shadow clearfix sr-listshow" v-for="(item,index) in data.data" :key='index'>
                    <div class="article-left">
                        <div style="width:100%;height:100%; margin: 0 auto;text-align:center">
                            <i :class="'fa '+item.pic+' fa-5x'" :alt="item.title"
                                v-bind:style="{color:SetColor(item.titlecolor)}"></i>
                        </div>
                    </div>
                    <div class="article-right">
                        <div class="article-title">
                            <router-link :to="'/news/newsdetail?id='+item.id" :title="item.title">{{item.title}}</router-link>
   
                 
                        </div>
                        <div class="article-abstract">
                            {{item.title}}
                        </div>
                        <div class="article-footer">
                            <span class="layui-hide-xs"><i class="fa fa-tag" aria-hidden="true"></i>&nbsp;</span>
                            <span><i class="fa fa-clock-o" aria-hidden="true"></i>{{item.adddate}}</span>
                            <span class="article-viewinfo">{{item.views}}阅读</span>
               
                                <router-link :to="'/news/newsdetail?id='+item.id" :title="item.title">阅读</router-link>
                        </div>
                    </div>
                    <div class="flag flag-left">推荐</div>
                </div>
            </div>
</template>
<script lang="ts">
export default {
    name:'blog'

}
</script>
<script lang="ts" setup>
import { ref, reactive,withDefaults,defineProps } from "vue";
interface IblogProps {
  data: any
}
const props = withDefaults(defineProps<IblogProps>(), {
  data:Object
});


const data=ref(null) as any;
const model=ref(null) as any;

    data.value=props.data;

console.log(data.value);

const SetColor=(_this:any)=>{
       if (_this === null || _this === undefined) {
                    return "#009688";
                } else return _this;
}

</script>